<template>
  <div class="app-container">
    <el-scrollbar class="form-scrollbar">
      <el-form label-position="right" :inline="true" class="demo-form-inline">
        <el-form-item label="商品/HS编码：">
          <el-input
            clearable
            v-model="listQuery.CommodityId"
            placeholder=""
          ></el-input>
        </el-form-item>
        <el-form-item label="贸易伙伴：">
          <el-select
            v-model="listQuery.TradepartnerId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in listTradepar"
              :key="item.tradepartnerId"
              :label="item.tradepartnername"
              :value="item.tradepartnerId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="贸易方式：">
          <el-select
            v-model="listQuery.TrademodeId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in listTrademode"
              :key="item.trademodeId"
              :label="item.trademodename"
              :value="item.trademodeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="收发货人注册地：">
          <el-select
            v-model="listQuery.ProvinceId"
            clearable
            placeholder="请选择"
          >
            <el-option
              v-for="item in listProvince"
              :key="item.provinceId"
              :label="item.provincename"
              :value="item.provinceId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search">查询</el-button>
          <el-button @click="clear">重置</el-button>
        </el-form-item>
      </el-form>
      <div>
        <el-row>
          <el-col>
            <el-table style="width: 100%" :data="list">
              <el-table-column prop="commodityId" label="商品编码">
              </el-table-column>
              <el-table-column prop="commodityname" label="商品名称">
              </el-table-column>
              <el-table-column prop="tradepartnername" label="贸易伙伴名称">
              </el-table-column>
              <el-table-column prop="trademodename" label="贸易方式名称">
              </el-table-column>
              <el-table-column prop="provincename" label="注册地名称">
              </el-table-column>
              <el-table-column prop="firstquantity" label="第一数量">
              </el-table-column>
              <el-table-column prop="firstuomname" label="第一计量单位">
              </el-table-column>
              <el-table-column prop="secondquantity" label="第二数量">
              </el-table-column>
              <el-table-column prop="seconduomcode" label="第二计量单位">
              </el-table-column>
              <el-table-column prop="amountrmb" label="人名币">
              </el-table-column>
            </el-table>
            <div style="pagebox">
              <pagination
                class="explore_right_pages"
                v-show="list.length > 0"
                :page-sizes="[10]"
                :page.sync="listQuery.page"
                :limit.sync="listQuery.limit"
                :total="total"
                @pagination="search"
              />
            </div>
          </el-col>
        </el-row>
      </div>
    </el-scrollbar>
  </div>
</template>

<script>
import { Component, Vue, Watch } from "vue-property-decorator";
import Pagination from "@/components/Pagination/index.vue";
import { getLongTimeAction, getAction } from "@/api/common";

export default {
  data() {
    return {
      listQuery: {
        CommodityId: "",
        TradepartnerId: "",
        TrademodeId: "",
        ProvinceId: "",
        page: 1,
        limit: 10,
        total: 0,
      },
      list: [],
      listTradepar: [],
      listTrademode: [],
      listProvince: [],
      pagesize: 10,
      currentPage: 1,
      total: 0, //总数量
    };
  },
  created: function () {
    this.loadTradepar();
    this.loadTrademode();
    this.loadProvince();
    if (this.$route.query.targetData != null) {
      let name = this.$route.query.targetData.name;
      let value = this.$route.query.targetData.value;
      switch (name) {
        case "CommodityId":
          this.listQuery.CommodityId = value;
          break;
        default:
          break;
      }
      this.search();
      //清除query
      this.$router.push({ query: {} });
    }
  },
  components: {
    Pagination,
  },
  methods: {
    async search() {
      let _this = this;
      console.log(_this.listQuery);
      const listQuery = JSON.parse(JSON.stringify(_this.listQuery));
      console.log(listQuery);
      getLongTimeAction(listQuery, "CustomsData/searchCustomsData")
        .then((res) => {
          console.log(res);
          this.list = res.data.items;
          this.total = res.data.total;
        })
        .finally(() => {});
    },
    clear() {
      this.listQuery.CommodityId = "";
      this.listQuery.TradepartnerId = "";
      this.listQuery.TrademodeId = "";
      this.listQuery.ProvinceId = "";
    },
    loadTradepar() {
      //贸易伙伴
      getAction("", "CustomsData/searchTradepar")
        .then((res) => {
          console.log(res);
          this.listTradepar = res.data;
        })
        .finally(() => {});
    },
    loadTrademode() {
      //贸易方式
      getAction("", "CustomsData/searchTrademode")
        .then((res) => {
          console.log(res);
          this.listTrademode = res.data;
        })
        .finally(() => {});
    },
    loadProvince() {
      //收货人收发货地址
      getAction("", "CustomsData/searchProvince")
        .then((res) => {
          console.log(res);
          this.listProvince = res.data;
        })
        .finally(() => {});
    },
  },
};
</script>
<style scoped>
.app-container {
  padding-top: 20px;
  height: calc(100vh - 65px);
}

.form-scrollbar {
  height: calc(100vh - 75px);
}

.form-company {
  min-width: 720px;
}

span {
  font-size: 14px;
  text-align: right;
}

/* 分页样式 */
.explore_right_pages {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 60px;
}
.el-icon-arrow-right:before {
  content: "下一页";
}
.el-pagination button:hover {
  color: #999999;
}
.el-pagination button {
  color: #999999;
}
.el-pagination .btn-next {
  width: 60px;
  height: 35px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #cccccc;
  padding-left: 0;
  padding-right: 0;
}

.el-pager li {
  background-color: unset;
}
.el-pager li:hover {
  color: #999999;
}

.el-pager .number {
  width: 35px;
  height: 35px;
  line-height: 35px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #cccccc;
  margin-right: 5px;
  margin-right: 5px;
  color: #999999;
}
.el-pager .number:hover {
  color: #999999;
}
.el-pager li.active {
  border: none;
  cursor: pointer;
  background: #ff9213;
  color: #fff;
}
.el-pager li.active:hover {
  color: #fff;
  background: #ff9213;
}
.el-pager li.btn-quicknext {
  line-height: 28px;
  color: #999;
}
</style>
